<template>
  <div>
    <div>
      <!-- 分配权限弹窗 -->
      <el-dialog title="分配权限" :visible.sync="jurisdictionShow">
        <el-tree
          :data="dataList"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
        />

        <!-- 按钮 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="js">
import {
  // 获取所有权限点
  getAllPermissionApi
} from '@/api/permission.js'
export default {
  name: 'ComponentAllocationJurisdiction',
  data() {
    return {
      jurisdictionShow: false, // 分配权限 dialog
      dataList: [{
        // id: 1,
        // label: '一级 2',
        // children: [{
        //   id: 3,
        //   label: '二级 2-1',
        //   children: [{
        //     id: 4,
        //     label: '三级 3-1-1'
        //   }, {
        //     id: 5,
        //     label: '三级 3-1-2',
        //     disabled: true
        //   }]
        // }, {
        //   id: 2,
        //   label: '二级 2-2',
        //   disabled: true,
        //   children: [{
        //     id: 6,
        //     label: '三级 3-2-1'
        //   }, {
        //     id: 7,
        //     label: '三级 3-2-2',
        //     disabled: true
        //   }]
        // }]
      }]
    }
  },
  mounted() {
    this.getAllPermission()
  },
  methods: {
    // 确定按钮
    submit() {

    },
    // 获取所有权限点
    async getAllPermission() {
      const res = await getAllPermissionApi()
      this.dataList = this.turnData(res.data, '0')
      console.log(res)
    },

    // 树桩结构递归
    turnData(arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const son = this.turnData(arr, item.id)
          if (son.length > 0) {
            item.children = son
          }
          res.push(item)
        }
      })
      return res
    },
    // 取消按钮
    cancel() {
      this.jurisdictionShow = false
    }
  }
}
</script>

<style></style>
